<template>
  <div class="dashboard-container">
    <div class="app-container">
      <PageTool>
        <template #before>
          <el-button type="primary" @click="addPage">添加页面</el-button>
        </template>
        <template #after>
          <el-input v-model="search" placeholder="请输入内容" class="input-with-select" />
          <el-button slot="append" icon="el-icon-search" @click="searchBtn" />
        </template>
      </PageTool>
      <el-table :data="formData" border>
        <el-table-column prop="title" label="标题" />
        <el-table-column prop="content" label="内容">
          <template v-slot="{row}">
            <div v-html="row.content" />
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template v-slot="{ row }">
            <el-button type="primary" size="small" @click="editFn(row.id)">编辑</el-button>
            <el-button type="danger" size="small" @click="delFn(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <!-- 分页 -->
      <el-card>
        <el-row type="flex" justify="center">
          <el-pagination
            :page-size="limit"
            layout="total, prev, pager, next"
            :total="total"
            @current-change="changePage"
          />
        </el-row>
      </el-card>
      <!-- 弹窗 -->
      <PageDialog ref="form" :show-dialog.sync="showDialog" @uploadList="loadList" />
    </div>
  </div>

</template>
<script>
import { getPageList, deletePage, getPageCount } from '@/api/pagemanage'
import PageDialog from './components/index.vue'
export default {
  components: { PageDialog },
  data() {
    return {
      formData: [],
      showDialog: false,
      limit: 7,
      start: 0,
      total: 1,
      search: ''
    }
  },
  computed: {},
  watch: {},
  created() {
    // 渲染
    this.loadList()
  },
  methods: {
    async loadList() {
      // 获取列表
      const res = await getPageList({
        _limit: this.limit,
        _start: this.start
      })
      this.formData = res.data
      // 获取经纪总数量
      const res1 = await getPageCount()
      this.total = res1.data
    },

    // 添加页面
    addPage() {
      this.showDialog = true
    },
    // 分页
    changePage(page) {
      // console.log(page)
      this.start = (page - 1) * this.limit
      this.loadList()
    },
    // 编辑页面
    async editFn(id) {
      this.showDialog = true
      this.$refs.form.getPageDetail(id)
    },
    // 删除页面
    delFn(id) {
      this.$confirm('是否确定删除权限', '删除', {
        type: 'warning'
      })
        .then(async() => {
          await deletePage(id)
          this.loadList()
        })
        .catch(() => {
          // console.log('取消了')
        })
    },
    // 搜索功能
    async searchBtn() {
      if (this.search === '') {
        return
      }
      const res = await getPageList({
        title_contains: this.search
      })
      console.log(2222, res)
      this.formData = res.data
    }
  }
}
</script>
<style scoped>
.el-table {
  margin-top: 20px;
}
</style>
